<template>
  <!-- 提交预约 -->
  <div class="container">
    <div class="imgList">
      <img
        :src="ImgBaseUrl+'/mp_3.2.4/paysuccess%402x.png'"
        v-if="ImgBaseUrl"
        class="img-success"
        alt
      />
      <div class="col-333">预约成功</div>
    </div>
    <div class="btn-box">
      <div class="back" @click="backhome">返回首页</div>
      <div class="check" @click="handleDetail">查看预约单</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      ImgBaseUrl: common.image_resource,
      appoint_id: ""
    };
  },

  components: {},

  onLoad(options) {
    wx.setNavigationBarTitle({ title: "预约成功" });
    wx.setNavigationBarColor({
      frontColor: "#333333", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#ffffff", //背景颜色值，有效值为十六进制颜色,
      success: res => {}
    });
    // console.log("opt", options);
    if (options.appoint_id) {
      this.appoint_id = options.appoint_id;
    }
  },
  methods: {
    // 返回首页
    backhome() {
      wx.switchTab({
        url: "/pages/index/main"
      });
    },
    // 查看预约单详情
    handleDetail() {
      wx.navigateTo({
        url:
          "/pages/package_projects/yy_order_detail/main?booking_id=" +
          this.appoint_id
      });
    }
  }
};
</script>
<style lang="less" scoped>
.size {
  width: 106px;
  height: 38px;
  line-height: 38px;
  border-radius: 100px;
  color: #fff;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
}
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  font-size: 14px;
  font-family: "PingFangSC-Regular, PingFang SC";
  .imgList {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 40px 0 54px 0;
    .img-success {
      width: 70px;
      height: 70px;
      margin-bottom: 10px;
    }
    .col-333 {
      color: #333;
      line-height: 20px;
    }
  }
  .btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .back {
      .size;
      background: rgba(242, 242, 242, 1);
      margin-right: 32px;
      color: #999;
    }
    .check {
      .size;
      background: linear-gradient(
        225deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 19px;
    }
  }
}
</style>